<script setup>
import { onMounted, reactive, ref, onUnmounted, watch } from 'vue'
// import {uploadBase64ToOSS} from '@/utils/uploadOSSImage'
import QRCode from 'qrcode'
import './index.css'
import CarWeighning from '../../components/CarWeighning.vue'
import CarChangeData from '../../components/CarChangeData.vue'
import WeighningLive from '../../components/WeighningLive.vue'
import ProcessControl from '../../components/ProcessControl.vue'
import {
  getCarLastTime,
  carStatus,
  singlarOnline,
  stopErrorWaning,
  addHeavyInfo,
  getPrintData,
  GetWbconfigByDeviceId
} from '../../service/processcontrol'
import axios from 'axios'
import { ElMessageBox } from 'element-plus'

let deptObj = window._info || {} //另一个项目传过来的数据
const info = window._deptObj || {}
const carplate = ref('') //车牌
const carData = ref({}) //重车过磅车辆信息
const weightData = ref({})
const carModelData = ref({})
const hardWareAllCode = [
  '391',
  '111',
  '321',
  '395',
  '408',
  '401',
  '403',
  '402',
  '406',
  '409',
  '410',
  '411',
  '412'
]
const printCode = ref(null) //判断code是否是553

const content = reactive({})
const edit = ref(false) //是否可以编辑
const isCanTakeover = ref(false) //是否可以点击人工接管
const opt = ref(null)
const carInOut = ref(null)

// 系统解锁
const isErrorWarning = ref(false) //异常报警
let isClick = ref(false)

function handleSystemRoot() {
  opt.value = 0
  isClick.value = true
  console.log('singlarOnline', isClick.value)
  singlarOnline({ DeviceID: info.WBCode }).then((res) => {
    //判断物联网设备是否在线
    console.log('singlarOnline', res)
    if (res.ResultCode === 105) {
      if (res.Statuse === 'ONLINE') {
        //"Statuse": "ONLINE",(ONLINE为设备正常在线，其余的为异常或者离线)
        let params = {
          code: '999',
          DeviceID: info.WBCode,
          GUID: carModelData.value.GUID,
          AbUptContent: info.UserName
        }
        console.log('handleSystemRoot', params)
        stopErrorWaning(params).then((res) => {
          //接触预警
          if (res.ResultCode === 105) {
            console.log('handleSystemRoot', res)
            isErrorWarning.value = false // 系统解锁按钮disabled属性
            isCanTakeover.value = true // 人工接管按钮的disabled属性
          } else {
            ElMessage.error('解除报警失败')
          }
        })
      } else {
        ElMessage.error('当前设备不在线')
      }
    } else {
      ElMessage.error('获取设备状态失败')
    }
  })
}

window.parent.postMessage({ action: 'UIKitDEMO2-data', DeviceID: info.WBCode }, '*')

//呼叫弹窗
function handleCall() {
  window.parent.postMessage({ action: 'send-data', data: true, DeviceID: info.WBCode }, '*')
}
// 部分过磅数据在人工接管时可编辑
function handleOpt() {
  opt.value = 1
  edit.value = true
}

function getWareAllCode(WBCode) {
  GetWbconfigByDeviceId({ WBCode }).then((res) => {
    const item = res.Info[0]
    if (item.IsGrating === '2') {
      hardWareAllCodeValue.push({
        code: '191',
        name: '红外对射预警',
        status: '1'
      })
    }
    if (item.IsAnitFraudDevice === '2') {
      hardWareAllCodeValue.push({
        code: '395',
        name: '地磅防作弊预警',
        status: '1'
      })
    }
    if (item.IsUnLoadTime === '2') {
      hardWareAllCodeValue.push({
        code: '661',
        name: '卸料时长预警',
        status: '1'
      })
    }
    if (item.IsMinWeighInterval === '2') {
      hardWareAllCodeValue.push({
        code: '660',
        name: '送料间隔预警',
        status: '1'
      })
    }
    if (item.IsWeighGuardRange === '2') {
      hardWareAllCodeValue.push({
        code: '401',
        name: '皮重预警',
        status: '1'
      })
    }
    if (item.IsOverloadAlert === '2') {
      hardWareAllCodeValue.push({
        code: '403',
        name: '毛重预警',
        status: '1'
      })
    }
    if (item.IsProvideWeight === '2') {
      hardWareAllCodeValue.push({
        code: '409',
        name: '运单量偏差预警',
        status: '1'
      })
    }
    if (item.IsMonitorWarning === '2') {
      hardWareAllCodeValue.push({
        code: '21',
        name: '卸料确认预警',
        status: '1'
      })
    }
    if (item.IsVFRecog === '2') {
      hardWareAllCodeValue.push({
        code: '410',
        name: '车脸识别预警',
        status: '1'
      })
    }
    if (item.IsMaterialRecong === '2') {
      hardWareAllCodeValue.push({
        code: '760',
        name: '材料识别预警',
        status: '1'
      })
    }
    if (item.IsCheckDeviceInterval === '2') {
      hardWareAllCodeValue.push({
        code: '411',
        name: '车体人数预警',
        status: '1'
      })
    }
    if (item.IsVBlack === '2') {
      hardWareAllCodeValue.push({
        code: '406',
        name: '黑名单预警',
        status: '1'
      })
    }
    if (item.IsWeights === '2') {
      hardWareAllCodeValue.push({
        code: '402',
        name: '单日过磅次数预警',
        status: '1'
      })
    }
    if (item.IsPlanOrContract === '2') {
      hardWareAllCodeValue.push({
        code: '408',
        name: '送料超量预警',
        status: '1'
      })
    }
    if (item.IsErrCameras === '2') {
      hardWareAllCodeValue.push({
        code: '412',
        name: '摄像头故障数预警',
        status: '1'
      })
    }
    if (item.IsGrating === '1') {
      hardWareAllCodeValue.push({
        code: '191',
        name: '红外对射预警',
        status: '2'
      })
    }
    if (item.IsAnitFraudDevice === '1') {
      hardWareAllCodeValue.push({
        code: '395',
        name: '地磅防作弊预警',
        status: '2'
      })
    }
    if (item.IsUnLoadTime === '1') {
      hardWareAllCodeValue.push({
        code: '661',
        name: '卸料时长预警',
        status: '2'
      })
    }
    if (item.IsMinWeighInterval === '1') {
      hardWareAllCodeValue.push({
        code: '660',
        name: '送料间隔预警',
        status: '2'
      })
    }
    if (item.IsWeighGuardRange === '1') {
      hardWareAllCodeValue.push({
        code: '401',
        name: '皮重预警',
        status: '2'
      })
    }
    if (item.IsOverloadAlert === '1') {
      hardWareAllCodeValue.push({
        code: '403',
        name: '毛重预警',
        status: '2'
      })
    }
    if (item.IsProvideWeight === '1') {
      hardWareAllCodeValue.push({
        code: '409',
        name: '运单量偏差预警',
        status: '2'
      })
    }
    if (item.IsMonitorWarning === '1') {
      hardWareAllCodeValue.push({
        code: '21',
        name: '卸料确认预警',
        status: '2'
      })
    }
    if (item.IsVFRecog === '1') {
      hardWareAllCodeValue.push({
        code: '410',
        name: '车脸识别预警',
        status: '2'
      })
    }
    if (item.IsMaterialRecong === '1') {
      hardWareAllCodeValue.push({
        code: '760',
        name: '材料识别预警',
        status: '2'
      })
    }
    if (item.IsCheckDeviceInterval === '1') {
      hardWareAllCodeValue.push({
        code: '411',
        name: '车体人数预警',
        status: '2'
      })
    }
    if (item.IsVBlack === '1') {
      hardWareAllCodeValue.push({
        code: '406',
        name: '黑名单预警',
        status: '2'
      })
    }
    if (item.IsWeights === '1') {
      hardWareAllCodeValue.push({
        code: '402',
        name: '单日过磅次数预警',
        status: '2'
      })
    }
    if (item.IsPlanOrContract === '1') {
      hardWareAllCodeValue.push({
        code: '408',
        name: '送料超量预警',
        status: '2'
      })
    }
    if (item.IsErrCameras === '1') {
      hardWareAllCodeValue.push({
        code: '412',
        name: '摄像头故障数预警',
        status: '2'
      })
    }
  })
}

//websoket链接singlar实时通讯
const signalrUrl1 = ref(
  'https://test.chamotend.com:8099/api/Chat/negotiate?clientProtocol=1.5&connectionData=[{"name":"Chat"}]&_='
)
const ConnectionToken = ref('')
const signalrUrl2 = ref(
  'wss://test.chamotend.com:8099/api/Chat/connect?transport=webSockets&clientProtocol=1.5&connectionData=[{"name":"Chat"}]&connectionToken='
)
const date = ref(Date.now())
const init = async () => {
  try {
    await axios.get(signalrUrl1.value + date.value, {}).then((res) => {
      ConnectionToken.value = res.data.ConnectionToken
      openWebSocket()
    })
  } catch (error) {
    reconnection()
  }
}
var socketTask
const onLine = ref(true)
var t
const openWebSocket = () => {
  //建议使用Chrome浏览器，部分浏览器不支持websocket
  if ('WebSocket' in window) {
    console.log('您的浏览器支持WebSocket')
    let token = encodeURIComponent(ConnectionToken.value)
    socketTask = new WebSocket(signalrUrl2.value + token + '&tid=1') //创建WebSocket连接
    socketTask.onopen = onopen
    socketTask.onclose = onclose
    socketTask.onmessage = onmessage
    socketTask.onerror = onerror
  } else {
    console.log('您的浏览器不支持WebSocket')
  }
}
//WebSocket事件
const onopen = () => {
  //websocket连接打开时触发
  console.log('websocket open')
  //向服务器发送消息，H是signalr的类，M是前端调用服务端的方法名，A为参数列表
  if (info.WBCode) {
    setTimeout(() => {
      let sendData = { H: 'Chat', M: 'Bind', A: [`${info.WBCode}`] }
      socketTask.send(JSON.stringify(sendData))
    }, 500)
  }
}
const onclose = () => {
  //断开触发
  var newOnline = JSON.parse(localStorage.getItem(`onLine${info.WBName}`))
  if (newOnline) {
    goParent_fn('error', { WBName: info.WBName })
  }
  JSON.stringify(localStorage.setItem(`onLine${info.WBName}`, false))
  reconnection()
}
const setAUCount = reactive({
  getDataCode: '',
  SyQuantity: '',
  allQuantity: ''
})
const onerror = () => {}
const onmessage = (e) => {
  //接收到服务器信息触发
  if (e.data === '') return
  let data = JSON.parse(e.data)
  console.log('接收到的推送数据----------------------',  data)
  if (data && data.M && data.M.length > 0 && data.M[0].A && data.M[0].A.length > 0) {
    let getData = data.M[0].A[0].params
    if (getData && Object.keys(getData).length === 0) {
      return
    }
    if (getData.code === '899') {
      isErrorWarning.value = false
    }
    printCode.value = getData.code
    if (getData.code === '131') {
      //车辆数据
      carplate.value = getData.data.VIN
      carData.value = getData.data
      getCarStatus(getData.data.VIN)
    }
    if (getData.code === '121') {
      //过磅数据
      weightData.value = getData.data
      carWeigh.value = getData.data.Stable
    }
    if (getData.code === '550' || getData.code === '551') {
      //进场保存数据
      carModelData.value = getData.data
      getLastTime(getData.data.VIN)
      goParent(info.WBCode, 'save')
    }

    if (getData.code === '553' || getData.code === '554') {
      //多端登陆 如果收到进出场成功数据，一端解锁，其余端预警自动解除
      isErrorWarning.value = false
      carInOut.value = 'out'
      carModelData.value = getData.data
      isCanTakeover.value = false
      edit.value = false
      getLastTime(getData.data.VIN)
      goParent(info.WBCode, 'save')
    }
    if (hardWareAllCode.includes(getData.code)) {
      // 如果推了硬件状态
      getHardStatus(getData)
    }
    if (getData.code === '191') {
      cheatStatus.value = getData.data.Value
    }
    if (getData.code === '408') {
      setAUCount.getDataCode = '408'
      setAUCount.SyQuantity = getData.data.SyQuantity
      setAUCount.allQuantity = getData.data.AllQuantity
      console.log('setAUCount', setAUCount)
    }

    if (
        (getData.code === '661' && getData.data.TimCtrl == 0) ||
        (getData.code === '660' && getData.data.TimCtrl == 0) ||
        getData.code === '191' ||
        getData.code === '395' ||
        getData.code === '408' ||
        getData.code === '401' ||
        getData.code === '403' ||
        getData.code === '402' ||
        getData.code === '406' ||
        getData.code === '409' ||
        getData.code === '410' ||
        getData.code === '411' ||
        getData.code === '412' ||
        (getData.code === '760' && getData.data.RecogStatue !== '1')
     ) {
      //出进场时间异常报警
      if (!isErrorWarning.value) {
        isErrorWarning.value = true
      }
    }
    hardWareAllCodeValue.forEach((item) => {
      if (item.code === getData.code) {
        item.status = '0'
      }
    })
  }
}
const reconnection = function () {
  t = setTimeout(() => {
    init()
  }, 5000)
}
// 判断车辆是重车称重还是空车回皮
const carType = ref('')
const carWeigh = ref('')
const getCarStatus = (car) => {
  let params = {
    TenantID: info.TenantID, //租户编号
    OrgId: info.OrgId, //机构编号
    DeptCode: info.DeptCode, //项目编号
    VIN: car //车牌号
  }
  carStatus(params)
    .then((res) => {
      if (res.ResultCode === 105) {
        carType.value = res.Types
        carInOut.value = 'in'
        if (res.Types === 1) {
          //空车回皮时返回的数据
          carModelData.value = res.Info[0]
        }
        if (res.Types === 0) {
          carModelData.value = {}
          opt.value = null
        }
        goParent(info.WBCode, 'car')
      }
    })
    .catch((err) => {
      console.log(err)
    })
}
// 根据车牌号获取上一次出场时间
const difference = (start, end) => {
  var dateBegin = new Date(start)
  var dateEnd = new Date(end)
  var dateDiff = dateEnd.getTime() - dateBegin.getTime() //时间差的毫秒数
  var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)) //计算出相差天数
  var leave1 = dateDiff % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
  var hours = Math.floor(leave1 / (3600 * 1000)) //计算出小时数
  //计算相差分钟数
  var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
  var minutes = Math.floor(leave2 / (60 * 1000)) //计算相差分钟数
  //计算相差秒数
  var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
  var seconds = Math.round(leave3 / 1000)
  let diffTime = dayDiff + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒'
  console.log('相差' + dayDiff + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒')
  return diffTime
}
const getLastTime = (car) => {
  if (carType.value === 0) {
    let params = {
      TenantID: info.TenantID, //租户编号
      OrgId: info.OrgId, //机构编号
      DeptCode: info.DeptCode, //项目编号
      VIN: car //车牌号
    }
    getCarLastTime(params).then((res) => {
      if (res.ResultCode === 105 && carModelData.value.StartTime) {
        let time = difference(res.LastTime, carModelData.value.StartTime)
        carModelData.value.lastStartTime = time
      } else {
        carModelData.value.lastStartTime = null
      }
    })
  }
  if (carType.value === 1 && carModelData.value.StartTime && carModelData.value.EndTime) {
    let time = difference(carModelData.value.StartTime, carModelData.value.EndTime)
    carModelData.value.lastEndTime = time
  } else {
    carModelData.value.lastEndTime = null
  }
}
//硬件状态
const hardWareAllCodeValue = reactive([])
const cheatStatus = ref(null)
const getHardStatus = (tag) => {
  console.log('tag', tag)
  if (tag.code === '111') {
    //摄像头
    let carmeras = tag.data.Status.result
    carmeras.forEach((i) => {
      hardWareAllCodeValue.forEach((j) => {
        if (i.Code === j.code) {
          j.status = i.Status
        }
      })
    })
  } else if (tag.code === '391') {
    //电子围栏
    if (tag.data.Status === 0 && tag.data.code === '131') {
      if (!isErrorWarning.value) {
        isErrorWarning.value = true
      }
    }
    if (tag.data.Status === 1) {
      // Status为1即为正常
      // 为1自动解锁
      if (isErrorWarning.value) {
        handleSystemRoot()
      }
    }
    hardWareAllCodeValue.forEach((item) => {
      if (item.code === tag.code) {
        item.status = tag.data.Status
      }
    })
  } else if (tag.code === '395') {
    hardWareAllCodeValue.forEach((item) => {
      if (item.code === tag.code) {
        item.status = tag.data.Status
      }
    })
  } else {
    hardWareAllCodeValue.forEach((item) => {
      if (item.code === tag.code) {
        item.status = tag.data.Status
      }
    })
  }
}
//保存数据
const myRefs = ref()
const carRefs = ref()
const text = ref('')
const qrImage = ref('')


const saveData = () => {
  myRefs.value.ruleForm.validate((valid, fields) => {
    if (valid) {
      carRefs.value.isCompelte = true
      setTimeout(() => {
        carRefs.value.isCompelte = false
      }, 7000)
      let formdata = myRefs.value.formInline
      let params = {
        ...formdata,
        DeviceCode: info.WBCode,
        AbStatus: '0'
      }
      if (isClick.value) {
        params.AbStatus = '1'
      }
      // 扣吨和扣率设置未选择的项值为0
      if (
        myRefs.value.initFormInline &&
        myRefs.value.initFormInline.DeductWeight > 0 &&
        myRefs.value.initFormInline.DeductRatio > 0
      ) {
        if (myRefs.value.deductValue === '1') {
          params.DeductRatio = 0
        }
        if (myRefs.value.deductValue === '2') {
          params.DeductWeight = 0
        }
      }

      // 如果是进场数据 判断收料 发料 直收直发，
      // 如果是出场数据 添加

      if (myRefs.value.initFormInline && myRefs.value.initFormInline.DeductWeight === 0) {
        if (myRefs.value.deductValue === '1') {
          params.DeductWeight = 0
        }
        if (myRefs.value.deductValue === '2') {
          params.DeductRatio = 0
        }
      }
      addHeavyInfo(params).then((res) => {
        if (res.ResultCode === 105 && res.Info && res.Info.length > 0) {
          //生成打印单二维码
          // console.log(carModelData.value)
          // const content = `https://op.yearrow.com/order-shared/order-detail.html?tag=${params.YieldCategory === 1 || params.YieldCategory === '1'? 'wqReceive': 'wqDelivery'
          // }&tId=${params.TenantID}&oId=${params.OrgId}&id=${params.GUID}`
          // QRCode.toDataURL(content, async function (err, url) {
          //   if (err) throw err
          //   let date = new Date()
          //   let y = date.getFullYear()
          //   let M = date.getMonth() >= 10 ? date.getMonth() + 1 : '0' + date.getMonth() + 1
          //   let d = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate()
          //   let h = date.getHours() >= 10 ? date.getHours() : '0' + date.getHours()
          //   let m = date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()
          //   let s = date.getSeconds() >= 10 ? date.getSeconds() : '0' + date.getSeconds()
          //   const fileName =
          //     params.DeviceID + '/' + y + M + d + '/' + h + m + s
          //   console.log(fileName,url)
          // // const ossUrl = await uploadBase64ToOSS(url, fileName)
          // // console.log(ossUrl) // 这里是你上传后的二维码图片在阿里云OSS上的访问地址
          // })

          //打印
          if (printCode.value === '553') {
            let data={
              ...carModelData.value,
              source: 'AWM', //来源
              command: 'RPRINT',
              message: '打印',
              MinAmntDiffThld:params.MinAmntDiffThld,
              MaxAmntDiffThld:params.MaxAmntDiffThld,
              AmntDiffUnit:params.AmntDiffUnit,
              AmntDiffResult:params.AmntDiffResult,
              AmntDiffValue:params.AmntDiffValue,
              TestDeductRatio:params.TestDeductRatio,
              TestDeductWeight:params.TestDeductWeight,
              HiddenDeductWeight:params.HiddenDeductWeight,
              ContractItemld:"",
              ContracDeductRatio:params.ContracDeductRatio,
              ContracDeductWeight:params.ContracDeductWeight,
            }
            getPrintData(data).then(async (pri) => {
              if (pri.ResultCode === 103) {
                ElMessage.error('打印失败')
              }
            })
          } else {
            carModelData.value = res.Info[0]
          }
        } else {
          ElMessage.error('保存失败')
        }
      })
    }
  })
}
// 音频播放
const audioRef = ref(null)
const voicePath = ref('')
const playVoice = () => {
  //播放
  voicePath.value = new URL('../../images/error.mp3', import.meta.url).href
  let startPlayPromise = audioRef.value.play()
  audioRef.value.currentTime = 0
  startPlayPromise
    .catch((error) => {
      if (error.name === 'NotAllowedError') {
        audioRef.value.currentTime = 0
        audioRef.value.play()
      }
    })
    .then(() => {
      console.log('正常播放')
    })
}
const stopVoice = () => {
  //停止
  audioRef.value && audioRef.value.pause()
}
watch(isErrorWarning, (newValues, oldValues) => {
  if (newValues) {
    playVoice()
    goParent(info.WBCode, 'warn')
  } else {
    stopVoice()
    goParent(info.WBCode, 'nowarn')
    hardWareAllCodeValue.forEach((item) => {
      item.status = '1'
    })
  }
})
const goParent = (code, flag) => {
  let params = {
    code: code,
    flag: flag ? flag : ''
  }
  window.parent.postMessage({ params }, '*')
}


const goParent_fn = (eventName, data) => {
  let params = {
    eventName,
    ...data
  }
  window.parent.postMessage({ params }, '*')
}
let netWorkUrl = ref(null)
//定时判断网络状态
let isWarning = 0
const getReadyImg = () => {
  isWarning++
  var newOnline = JSON.parse(localStorage.getItem(`onLine${info.WBName}`))
  if (!newOnline && isWarning > 0) {
    goParent_fn('success', { WBName: info.WBName })
    init()
  }
  JSON.stringify(localStorage.setItem(`onLine${info.WBName}`, true))
}
const getErrorImg = () => {
  var newOnline = JSON.parse(localStorage.getItem(`onLine${info.WBName}`))
  if (newOnline) {
    goParent_fn('error', { WBName: info.WBName })
  }
  JSON.stringify(localStorage.setItem(`onLine${info.WBName}`, false))
}
const timer = setInterval(() => {
  axios({
    method: 'get',
    url: 'https://test.chamotend.com:8099',
    timeout: 1000
  })
    .then(() => {
      getReadyImg()
    })
    .catch(() => getErrorImg())
}, 5000)




onMounted(() => {
  init()
  getWareAllCode(info.WBCode)
})
onUnmounted(() => {
  localStorage.removeItem(`onLine${info.WBName}`)
  clearInterval(timer)
  stopVoice()
  socketTask.close()
})


//手动上磅和下磅
const changeCarInOut = (tag) => {
  if (tag === 'back') {
    carInOut.value = null
  } else {
    carInOut.value = tag
  }
}
</script>
<template>
  <div class="process-continer">
    <!-- header -->
    <!-- <div class="top-header">
      <span class="header-logo"></span>`
      <span class="header-name">易龙分布式云称重控制台</span>
      <span class="header-name">易龙分布式云称重控制台 {{ info.WBName }}</span>
      <el-button @click="goParent(info.WBCode)">进车</el-button>
    </div> -->
    <div class="middle-content">
      <!-- title-->
      <div class="top-title">
        <div>
          <span class="label">过磅单位:</span>
          <span class="content">{{ info.DeptName }}</span>
        </div>
        <div>
          <span class="label">磅台名称:</span>
          <span class="content">{{ info.WBName }}</span>
        </div>
      </div>
      <!-- content -->
      <div class="content-box">
        <CarWeighning
          ref="carRefs"
          :stable="carWeigh"
          :types="carType"
          :changeData="saveData"
          :carModelData="carModelData"
          :carInOut="carInOut"
          :isEdit="edit"
          @changeCarInOut="changeCarInOut"
        />
        <div>
          <div class="content-top">
            <CarChangeData
              :formValue="content"
              ref="myRefs"
              :isEdit="edit"
              :carData="carData"
              :weightData="weightData"
              :carModelData="carModelData"
              :carWeigh="carWeigh"
            />
            <WeighningLive :isError="isErrorWarning" />
          </div>
          <ProcessControl
            :types="carType"
            :carModelData="carModelData"
            :isError="isErrorWarning"
            :cheatStatus="cheatStatus"
            :carplate="carplate"
            :setAUCount="setAUCount"
          />
        </div>
      </div>
    </div>
    <!-- footer -->
    <div class="footer">
      <ul class="footer-item">
        <li v-for="(item, index) in hardWareAllCodeValue" :key="index">
          <span
            :class="
              item.status === '0' ? 'offlineTxt' : item.status === '1' ? 'onlineTxt' : 'nohardTxt'
            "
          >
            {{ item.name }}
          </span>
          <span v-if="item.status && item.status === '0'" class="offline"></span>
          <span v-if="item.status && item.status === '1'" class="online"></span>
          <span v-if="item.status && item.status === '2'" class="nohard"></span>
        </li>
      </ul>
      <!-- <ul class="footer-info">
        <li class="tel">客服电话:400-666-9200(7*24h)</li>
      </ul> -->
    </div>
    <div class="opt-btn">
      <el-button
        :class="{ active: opt === 0 }"
        @click="handleSystemRoot()"
        style="z-index: 6"
        :disabled="!isErrorWarning"
        >系统解锁
      </el-button>
      <el-button :class="{ active: opt === 1 }" @click="handleOpt()" :disabled="!isCanTakeover"
        >人工接管
      </el-button>
      <el-button @click="handleCall()">呼叫</el-button>
    </div>
    <div class="error_warning" v-show="isErrorWarning">
      <img src="../../images/errorCall.png" />
      <audio ref="audioRef" loop hidden="true" :src="voicePath" autoplay></audio>
    </div>
  </div>
</template>

<style scoped lang="scss">
.process-continer {
  width: 100%;
  height: 100vh;
  background: #1b2133;
  position: relative;

  .top-header {
    background: #2c324d;
    height: 60px;
    padding: 10px;
    color: #fff;
    display: flex;
    align-items: center;

    .header-logo {
      display: inline-block;
      width: 50px;
      height: 50px;
      border-radius: 5px;
      background: #165dff;
    }

    .header-name {
      font-size: 28px;
      color: #fff;
      margin-left: 20px;
    }
  }

  .middle-content {
    padding: 0px 10px;
    height: calc(100vh - 50px);

    .top-title {
      width: 100%;
      height: 60px;
      background: #2c324d;
      font-weight: bold;
      display: flex;
      flex: 1;
      align-items: center;
      line-height: 40px;

      .label {
        color: #626887;
        display: inline-block;
        min-width: 100px;
        text-align: right;
        font-size: 17px;
        font-weight: bold;
      }

      .content {
        color: #989eba;
        font-size: 17px;
        font-weight: bold;
        margin-left: 10px;
      }
    }

    .content-box {
      width: 100%;
      margin: 10px 0px;
      height: calc(100vh - 130px);
      display: flex;
      overflow-y: auto;

      .content-top {
        display: flex;
        justify-content: space-around;
        height: 61%;
      }
    }
  }

  .footer {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: #2c324d;
    display: flex;

    .footer-item {
      // width: calc(100% - 410px);
      padding-inline-start: 30px;
      height: 100%;
      display: flex;
      flex: 1;
      align-items: center;
      color: #fff;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      li {
        margin-right: 30px;
        height: 100%;
      }

      .offline,
      .online,
      .nohard {
        display: inline-block;
        width: 15px;
        height: 15px;
        line-height: 20px;
        border-radius: 50%;
        margin-left: 5px;
        vertical-align: middle;
      }

      @keyframes blink {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }

      .offlineTxt,
      .onlineTxt,
      .nohardTxt {
        font-size: 14px;
        color: #fff;
      }

      .onlineTxt {
        color: #86df6c;
      }

      .offlineTxt {
        color: #ff5b5b;
        animation: blink 1s infinite;
      }

      .nohardTxt {
        color: #e6a23c;
      }

      .online {
        background: #86df6c;
      }

      .offline {
        background: #ff5b5b;
      }

      .nohard {
        background: #e6a23c;
      }
    }

    .footer-info {
      text-align: right;
      margin-right: 25px;

      .tel {
        font-size: 14px;
        color: #fff;
        font-weight: 900;
      }
    }
  }

  :deep(.opt-btn) {
    position: absolute;
    bottom: 33px;
    right: 24px;
    display: flex;

    .el-button {
      width: auto;
      height: 40px;
      line-height: 40px;
      background: #2c324d;
      border: 1px solid #165dff;
      color: #165dff;
      font-size: 15px;
      padding: 0 15px;
      margin-right: 25px;
    }

    .active {
      background: #165dff;
      color: #fff;
    }
  }

  .error_warning {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    animation: twinkle 1s;
    animation-iteration-count: infinite;
    @keyframes twinkle {
      from {
        opacity: 1;
      }
      50% {
        opacity: 0.5;
      }
      to {
        opacity: 1;
      }
    }

    img {
      width: 100%;
      height: 100%;
    }
  }

  .none {
    pointer-events: none;
  }
}
</style>
